<template>
  <div class="dialog-content">
    <el-dialog custom-class="dialog-content__dialog" v-if="dialogOptions.show"
     :title="dialogOptions.title" :visible.sync="dialogOptions.show" :width="dialogOptions.width"
     :modal="dialogOptions.modal" :center="dialogOptions.center" :append-to-body="dialogOptions.appendToBody"
     :close-on-click-modal="dialogOptions.closeOnClickModal"
     :close-on-press-escape="dialogOptions.closeOnClickEscape"
     :destroy-on-close="dialogOptions.destroyOnClose"
     :before-close="closeHandle">
      <div class="dialog-content__dialog-content" :style="{ height: dialogOptions.height }">
        <slot name="dialog-content_content"></slot>
      </div>
      <span class="dialog-content__dialog-footer" slot="footer">
        <slot name="dialog-content_footer"></slot>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'dialog-content',
  props: {
    // 设置
    dialogOptions: {
      type: Object,
      default: () => ({
        title: '自定义标题',
        show: true, // 是否显示
        modal: true, // 是否需要遮罩层
        width: '560px', // 宽度
        height: '300px', // 宽度
        center: true, // 是否对头部和底部采用居中布局
        closeOnClickModal: false, // 是否可以通过点击 modal 关闭 Dialog
        closeOnClickEscape: false, // 是否可以通过按下 ESC 关闭 Dialog
        destroyOnClose: false, // 关闭时销毁 Dialog 中的元素
        appendToBody: false // Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true
      })
    }
  },
  data() {
    return {}
  },
  created() {},
  methods: {
    closeHandle() {
      this.dialogOptions.show = false
      this.$emit('dialobCloseHandle')
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-content {
  &__dialog {
    &-content {
      width: 100%;
      overflow: auto;
    }
    &-footer {
    }
  }
}
</style>
<style lang="scss">
.dialog-content {
  &__dialog {
    .el-dialog {
      &__header {
        padding: 10px;
      }
      &__headerbtn {
        top: 15px;
      }
      &__body {
        padding: 15px !important;
      }
      &__footer {
        padding: 10px;
      }
    }
  }
}
</style>
